<script>
import * as echarts from 'echarts';
export default {
    name: 'echart',
    data() {
        return {
            myChart: null
        }
    },
    // 在挂载完成之前的生命周期中都无法获取 dom 元素
    mounted() {
        console.log(document.getElementById('main'));

        // 基于准备好的dom，初始化echarts实例
        this.myChart = echarts.init(document.getElementById('main'));

        this.changeOption({})

    },
    methods: {
        changeOption(config) {
            /*
                type  图表类型
                x  x 轴数据
                y  y 轴数据
            */
            let {
                type = 'bar',
                x = ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
                y = [5, 20, 36, 10, 10, 20]
            } = config


            // 绘制图表
            this.myChart.setOption({
                // 标题配置
                title: {
                    text: 'ECharts 入门示例',
                    link: 'https://www.baidu.com',
                    textStyle: {
                        color: 'red',
                        textShadowColor: 'green',
                        textShadowBlur: 10,
                        textShadowOffsetX: 5
                    }
                },
                // 鼠标悬浮效果配置
                tooltip: {
                    show: true
                },
                xAxis: {
                    data: x,
                    position: 'bottom',
                    offset: 20
                },
                yAxis: {},
                series: [
                    {
                        name: '服装销售数据',
                        type,
                        data: y
                    }
                ]
            });
        }
    }
}
</script>
<template>
    <h2>
        图表

        <el-button @click="changeOption({
            type: 'line'
        })">折线图</el-button>
        <el-button @click="changeOption({
            type: 'bar'
        })">柱状图</el-button>
        <el-button @click="changeOption({
            type: 'pie'
        })">饼图</el-button>
        <el-button @click="changeOption({
            x: ['二锅头', '沱牌酒', '泸州老窖', '洋河大曲', '台子', '郎酒'],
            y: [20000, 15000, 200, 45000, 5000, 23897]
        })">白酒销售数据</el-button>
        <el-button @click="changeOption({
            x: ['冰箱', '电饭锅', '洗衣机', '空调', '电风扇', '电视'],
            y: [23, 66, 23, 45, 42, 33]
        })">家电销售数据</el-button>
    </h2>
    <div id="main"></div>
</template>

<style lang="scss" scoped>
#main {
    width: 800px;
    height: 550px;
}
</style>